<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素遍历操作</title>
		<!-- 元素遍历操作:针对DOM树中元素进行遍历  [父子级关系]
		children()      功能:获取匹配元素集合中每个元素的直接子元素
		parent()        功能:获取匹配元素集合中每个元素的直接父元素
		
		
		siblings()      功能:获取匹配元素集合中每个元素的所有兄弟元素
		
		next()          功能:获取匹配元素集合中每个元素的下一个兄弟元素
		prev()          功能:获取匹配元素集合中每个元素的上一个兄弟元素
		
		
		each()          功能:遍历匹配元素集合,对每个元素执行指定的函数
		
		 -->
		<style>
		.container{
			border: 1px solid #f8d0ff;
			margin: 10px;
			padding: 10px;
		}	
		.box{
			background-color:#cef1ff;
			margin: 10px;
			padding: 10px;
		}
		button{
			margin: 10px;
		}
			
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		
		<div class="container">
			<div class="box" id="box1">盒子1</div>
			<div class="box" id="box2">盒子2</div>
			<div class="box" id="box3">盒子3</div>
			<div class="box" id="box4">盒子4</div>
		</div>
		
		<button id="getcrBtn">获取直接子元素</button>
		<button id="getpBtn">获取父元素</button>
		<button id="getsBtn">获取兄弟元素</button>
		<button id="getnBtn">获取下一个兄弟元素</button>
		<button id="getpbtn">获取上一个兄弟元素</button>
		<button id="eachBtn">遍历元素</button>
		
		<script>
			
			/*1. 点击 获取直接子元素 按钮  .container父元素  给.box元素加 10px*/
			$("#getcrBtn").click(function(){
				$(".container").children().css("border","10px solid #aaff7f ")
			});
			
			/*2. 点击 获取父元素  按钮  .container父元素  加背景颜色 :#aaaaff*/
			$("#getpBtn").click(function(){
				$(".box").parent().css("background","#aaaaff")
			});
			
			/*3.点击 获取兄弟元素  按钮  box3的兄弟元素  加背景颜色 :#f00*/
			$("#getsBtn").click(function(){
				$("#box3").siblings().css("background","#f00")
			});
			
			/*4. 点击 获取下一个兄弟元素  按钮  box2的下一个元素  加背景颜色 :#eee*/
			$("#getnBtn").click(function(){
				$("#box2").next().css("background","#f9ffbd")
			});
			
			/*5.点击 获取上一个兄弟元素  按钮  box4的上一个元素  圆,阴影,字体放大*/
			$("#getpbtn").click(function(){
								$("#box4").prev().css({
								"width":"200px",
								"height":"200px",
								"border-radius":"50%",
								"text-shadow":"10px 10px 10px #ff007f",
								"font-size":"2em",
								"line-height":"200px",
								"text-align":"center"
								});
							});
			
		     /*6. 点击 遍历元素 按钮  实现 动态输出这是box1  
			    each(function(index,element){
					识别 ` `传入下标 ${index}
					注意:别加"" / ''
					})
			 */
		    $("#eachBtn").click(function(){
				$(".box").each(function(i,e){//i 下标| e  元素---形参
				 $(e).text(`这是第${i+1}盒子`);
					
				});
			});
		
		</script>
	</body>
</html>